<template>
	<view class="container">
		<view class="dateTimeWrap" v-if="showDateTimeBox">
			<view class="dateTab">
				<view v-for="item in dateType" :key='item.type'
				:class="{active:item.type == active}" 
				@click="changeDateType(item.type)">{{item.label}}</view>
			</view>
			<view class="datePicker">
				<view>监测时间：</view>
				<view class="dateRange" @click="onShowDatePicker">
					<view class="starttime">{{starttime}}</view>
					<text>至</text>
					<view class="endtime">{{endtime}}</view>
				</view>
			</view>
		</view>
		<mx-datepicker type="rangetime" 
		showSeconds
		format='yyyy-mm-dd hh:ii:ss'
		:show-tips="true" 
		:show="showPicker" 
		 :value="value" 
		 @confirm="onSelected" 
		 @cancel="onCanceled" />
		<view class="chartBox" :style="{height:showDateTimeBox?'310px':'350px'}">
			<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="uni-ec-canvas" canvas-id="uni-ec-canvas" :ec="ec"></uni-ec-canvas>
		</view>
		<view class="flex_around_row legendBox">
			<view class="flex_around_row">
				<text></text>
				<text></text>
				<text></text>
				<view>1级报警阈值</view>
			</view>
			<view class="flex_around_row">
				<text></text>
				<text></text>
				<text></text>
				<view>2级报警阈值</view>
			</view>
			<view class="flex_around_row">
				<text></text>
				<text></text>
				<text></text>
				<view>3级报警阈值</view>
			</view>
		</view>
	</view>
</template>

<script>
let vm;
export default {

	data() {
		return {
			cHeight:0,
			cWidth:0,
			value: '',
			showPicker:false,
			active:'1',
			dateType:[{
				label:'24h',
				type:'1'
			},
			{
				label:'7天',
				type:'7'
			},
			{
				label:'30天',
				type:'30'
			}],
			starttime:'',
			endtime:'',
		};
	},
	computed: {
		maxYAxis(){
			let max = Math.max(...this.chartData.series[0]['data'])
			if(max < 9){
				return 10
			}else{
				return Math.ceil(max)
			}
		},
		markPoint(){
			console.log('this.chartData',this.chartData)
		},
		ec() {
			vm = this
			return {
				option: {
					// dataZoom: [
					// 	{
					// 		// 'type':'inside',
					// 		show: true,
					// 		height: 25,
					// 		xAxisIndex: 0,
					// 		bottom: '10%',
					// 		left: '20%',
					// 		right: '20%',
					// 		start: 10,
					// 		end: 80,
					// 		borderColor: '#dcdcdc'
					// 	}
					// ],
					grid: {
						left: vm.grid.left,
						right: vm.grid.right,
						top: '15%',
						bottom: '22%',
						containLabel: true
					},
					tooltip: {
						confine: true,
						trigger: 'axis',
						// formatter: `{b}
						// {a}:{c}% VOL`
						formatter: `{b}
						{a}:{c}VOL%
						{a1}:{c1}℃`
					},
					// legend: {
					// 	show: true,
					// 	x: 'center',
					// 	y: '10',
					// 	icon: 'circle',
					// 	itemWidth: 10,
					// 	itemHeight: 10,
					// 	textStyle: {
					// 		color: '#333'
					// 	},
					// 	data: ['甲烷浓度', '温度']
					// },
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							axisLabel: {
								show: true,
								textStyle: {
									color: '#999' //X轴文字颜色
								}
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							data: vm.chartData.categories
						}
					],
					yAxis: [
						{
							type: 'value',
							name: '甲烷浓度（%VOL）',
							nameTextStyle:{
								color:'#4187f1',
								fontSize:'14px',
								align:'left',
							},
							min: 0,
							max: vm.maxYAxis,
							axisLabel:{
								textStyle:{
									color: '#333'
								},
							},
							axisLine: {
								lineStyle: {
									color: '#d3d3d3'
								}
							},
							axisTick: {
								show: false
							},
							splitLine: {
								show: true,
								lineStyle:{
									type:'dashed',
									color:'#f1f1f1'
								}
							},
						},
						{
							type: 'value',
							name: '温度（°C）',
							nameTextStyle:{
								color:'#0cbf50',
								fontSize:'14px',
								align:'center'
							},
							min: -10,
							max: 60,
							axisLabel:{
								textStyle:{
									color: '#333'
								},
							},
							axisLine: {
								lineStyle: {
									color: '#d3d3d3'
								}
							},
							position: 'right',
							axisTick: {
								show: false
							},
							splitLine: {
								show: false,
								lineStyle:{
									type:'dashed',
									color:'#f1f1f1'	
								}
							},
						}
					],
					series: [
						{
							name: '甲烷浓度',
							type: 'line',
							symbol: 'none',
							smooth: true,
							itemStyle: {
								normal: {
									color: '#4187f1',
									lineStyle: {
										color: '#4187f1',
										width: 2
									}
								}
							},
							data: vm.chartData.series[0]['data'],
							markLine: {
								lineStyle: {
									width: 1,
								},	
								label: {
									position: "insideEndTop",
									formatter: "{b}",
									color: "#333"
								},
								emphasis:{
									lineStyle: {
										width: 1,
									},	
									label: {
										position: "insideEndTop",
										formatter: "{b}",
										color: "#333"
									},
								},
								symbolSize: 0,
								data: [{
									// name: "甲烷浓度门限值5%VOL",
									yAxis: 1,
									lineStyle: {
										color: "#fbc60f"
									}
								},
								{
									// name: "甲烷浓度门限值5%VOL",
									yAxis: 4,
									lineStyle: {
										color: "#ff9211"
									}
								},
								{
									// name: "甲烷浓度门限值5%VOL",
									yAxis: 10,
									lineStyle: {
										color: "#ff5e3b"
									}
								}]
							},
							markPoint:{
								data:vm.markPoint
							}
						},
						{
							name: '温度',
							type: 'line',
							symbol: 'none',
							smooth: true,
							yAxisIndex: 1,
							itemStyle: {
								normal: {
									color: '#0cbf50',
									lineStyle: {
										color: '#0cbf50',
										width: 2
									}
								}
							},
							data: vm.chartData.series[1]['data']
						}
					]
				}
			};
		}
	},
	props: {
		max:{
			type: Number
		},
		chartData: {
			type: Object
		},
		landscape: {
			type: Boolean
		},
		showDateTimeBox:{
			type: Boolean
		},
		alarmInspect:{
			type: String
		},
		grid:{
			type: Object,
			default(){
				return{
					left:'10',
					right:'15'
				}
			}
		}
	},
	onLoad(params) {
		vm = this;
	},
	mounted() {
		uni.getSystemInfo({
			success(res) {
				vm.cHeight = res.windowHeight;
				vm.cWidth = res.windowWidth;
			}
		});
	},
	methods:{
		changeDateType(type){
			this.starttime = ''
			this.endtime = ''
			this.active = type
			this.getChartData(this.active)
		},
		onShowDatePicker(){
			console.log(this.showPicker)
			this.showPicker = true
		},
		onSelected(e){
			if(e) {
				vm.starttime = e.value[0]
				vm.endtime = e.value[1]
			}else{
				vm.starttime = vm.active
			}
			vm.getChartData()
			this.showPicker = false
		},
		onCanceled(){
			vm.starttime = ''
			vm.endtime = ''
			vm.showPicker = false
		},
		getChartData(starttime){
			vm.$api.equipCurveData({
				pipepointid:vm.alarmInspect,
				starttime:starttime || vm.starttime,
				endtime:vm.endtime
			})
			.then(res => {
				vm.$emit('update:chartData',Object.assign(res.data,{
					categories: res.data['times'],
					series: [
						{
							data:res.data['values'],
							name:'甲烷浓度',
							index:0
						},
						{
							data:res.data['wendu'],
							name:'温度',
							index:1
						},
					]
				}))
			})
			
		}
	}
};
</script>
<style lang="scss">
	.container{
		background: #fff;
	}
.chartBox {
	width: 100%;
	height: 300px;
}
.uni-ec-canvas {
	width: 100%;
	height: 100%;
	display: block;
}
.landscape {
	width: 100vh;
	height: 100vw;
	/* transform: rotateY(90deg); */
}
.dateTimeWrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 32px;
	line-height: 32px;
	padding: 0 44px;
	.dateTab{
		display: flex;
		align-items: center;
		border-radius:5px;
		
		view{
			height: 32px;
			line-height: 32px;
			text-align: center;
			width: 60px;
			background: #fff;
			border:1px solid #C2CDD6;
			font-size: 14px !important;
			&:first-child{
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
			}
			&:nth-child(2){
				border-left: 0;
				border-right: 0;
			}
			&:last-child{
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
			}
		}
		.active{
			background: #ECF3FE;
			border: 1px solid #4187F1 !important;
		}
	}
}
.datePicker{
	display: flex;
	view{
		font-size: 14px;
	}
	.dateRange{
		display: flex;
		view{
			border-radius: 5px;
			border: 1px solid #C2CDD6;
			text-align: center;
			height: 32px;
			line-height: 32px;
			width: 160px;
			
		}
		text{
			margin: 0 5px;
			color: #808080;
			font-size: 12px;
		}
	}
}
.legendBox{
	width: 100%;
	position: absolute;
	bottom: 20px;
	height: 40px;
	text{
		display: inline-block;
		height: 3px;
		width: 3px;
		margin-right: 3px;
		
	}
	view{
		color: #666;
		font-size:12px;
		&:nth-child(1){
			text{
				background: #ff5e3b;
			}
		}
		&:nth-child(2){
			text{
				background: #ff9211;
			}
		}
		&:nth-child(3){
			text{
				background: #fbc60f;
			}
		}
		view{
			margin-left: 5px;
		}
	}
}
</style>
